---
title: Guidelines
redirect_from:
  - /components/tile/
---

import DescriptionsExtraSnippet from "snippets/descriptions-extra.mdx";
import VisualHierarchySnippet from "snippets/visual-hierarchy.mdx";

<ReactExample exampleId="Tile-default" />

## When to use

- You have an action associated with a section of content.
- Your structured content should lead to the next step in the user flow.

## When not to use

- With information without a related action---use a [card](/components/structure/card/).

## Component status

<ComponentStatus component="Tile" />

## Content structure

![Title: sets the context for the tile and works best when short; chevron: indicates the interaction for the tile (like an external link); icon: optionally visually supports the tile focus; description: optionally provides more context and works best as a one-liner; header: displays whatever content you want to give it.](fileId:4QJZqvBvRrLu6t9mwObCkA;nodeId:219%3A1)

## Behavior

### Make the action clear

Tiles should be associated with a single action the user can take.
You don't want surprise users by jumping them into a different context without warning.

So if your action is, say, taking users to a different site where they can read more information,
provide icons and other cues to make it clear what will happen.

<GuidelineImages>

<DoImage>

![A tile with two icons showing that the tile leads to a link and the text 'Read about progressive disclosure'.](fileId:fannvRpkOJK6uxxT33EKaa;nodeId:140%3A1438)

Show the action.

</DoImage>

<DontImage>

![A tile with only the text 'Read about progressive disclosure'.](fileId:fannvRpkOJK6uxxT33EKaa;nodeId:140%3A1636)

Don't leave users guessing what might happen.

</DontImage>

</GuidelineImages>

## Content

<DescriptionsExtraSnippet />

## Look & feel

<VisualHierarchySnippet component="tile" />
